<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文献资源管理系统-是否到货加载示例</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body >
    <div class="page wrap-week">
   
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="card card-echarts">
                <div class="card-header"><p></p></div>
                <div class="card-content">
                    <div class="card-content-inner">
                        <div id="main"  style="height: 500px; width :100%; margin-top: 70px; "></div>
                        <div id="echartsPie"  style="height: 500px; width :100%; margin-top: 70px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   


<!-- ./wrapper -->
<script src="lib/jquery.min.js"></script>
<script src="lib/echarts.min.js"></script>
<script src="lib/walden.js"></script>

<script src="lib/mm.echarts.min.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>

var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        // backgroundColor: '#FFF0F5',
        title: {
            text: '学科加载示例',
            subtext: ''
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            data:['数量','提名']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: false},
                dataView : {show: true},
                magicType : {
                    show: true, 
                    title : {},  
                    type: ['line', 'bar']
                },
                restore : {show: false},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis: {
            type: 'category',
            name:'名称', 
            data:[],
            splitLine: {
                show: false
            }
     
        },
        yAxis: {
            // type: 'time',
            type: 'value',
            name:'数量', 
            splitLine: {
                show: false
            }
           
        },
        dataZoom: [{
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'empty',
        start: 0,
        end: 100
            }, {
                type: 'slider',
                yAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }, {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'empty',
                start: 0,
                end: 100
            }],
        series: [{
            name: '数量',
            type: 'line',
            barWidth: '50%',
            itemStyle : {  
                normal : {  
                    color:'	#00CCFF',  
                    lineStyle:{  
                        color:'	#00CCFF',
                    },
                }  
            }, 
        },{
            name: '提名',
            type: 'line',
            barWidth: '50%',
            itemStyle : {  
                normal : {  
                    color:'	#00CCFF',  
                    lineStyle:{  
                        color:'	#00CCFF',
                    },
                }  
            }, 
        }
        ]
    });
    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

var count=[];    //名称数组（实际用来盛放X轴坐标值）
var title=[];    //登录数组（实际用来盛放Y坐标值）
var country=[];    //创建数组（实际用来盛放Y坐标值）
$.ajax({
    type : "get",
    async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    url : "http://29n01o8660.oicp.vip/server/selectPuchasecountryTj",    //请求发送到TestServlet处
    data : {},
    dataType : "json",        //返回数据形式为json
    success : function(result) {
        // alert(JSON.stringify(result))
        //请求成功时执行该函数内容，result即为服务器返回的json对象
        if (result) {
            for(var i=0;i<result.length;i++){
                count.push(result[i].count);    //挨个取出名称并填入名称数组
            }
            for(var i=0;i<result.length;i++){
                title.push(result[i].title);    //挨个取出登录并填入登录数组
                // alert(JSON.stringify(userCdate))
            }
            for(var i=0;i<result.length;i++){
                country.push(result[i].country);    //挨个取出创建并填入创建数组
                // alert(JSON.stringify(userCdate))
            }
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表
                tooltip: {
                    trigger: 'axis',
                    formatter: function(country, count, title) {

                        var res = country[0].name;

                        for (var i = 0, l = country.length; i < l; i++) {
                            if (country[i].seriesType === 'line') {
                                res += '<br/>' + country[i].seriesName + ' : ' + (country[i].value ? country[i].value : '-');
                            } else {
                                res += '<br/>' + country[i].seriesName + ' : ' + (country[i].value ? country[i].value : '-');
                            }
                        }
                        return res;
                    }
                },
                xAxis: {
                    data: country ,
                    axisLabel: {
                    show: true,
                    textStyle: {
                        // color: 'red'
                    },
                   
                }
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name:'数量',
                    data: count,
                    label: {
                    normal: {
                        show: true,
                        position: 'top',
                    }
                },
                lineStyle: {
                    normal: {
                        width: 3,
                        shadowColor: 'rgba(0,0,0,0.4)',
                        shadowBlur: 10,
                        shadowOffsetY: 10
                    }
                },
                },{
                    // 根据名字对应到相应的系列
                    name:'提名',
                    data: title,
                    label: {
                    normal: {
                        show: true,
                        position: 'top',
                    }
                },
                
                }
                ]
            });
        }
    },
    error : function(errorMsg) {
        //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart.hideLoading();
    }
})

// 饼状图
    var json = [];
    var datas =[];
    
    $(function(){
        //ajax调用
        ajaxGetData();
    });	                    

    function ajaxGetData(){
        $.ajax({
            url:"http://29n01o8660.oicp.vip/server/selectPuchasecountryTj",
            type: "get",
            success:function(data){
                //以下两种解析json的方法都可以
                var jsonObject = eval(data);
                for(var i=0;i<jsonObject.length;i++){
                    json.push({value:jsonObject[i].count,name:jsonObject[i].country});
                    datas.push(jsonObject[i].country);
                }
                printPie();
            }
        });
    }
    
    function printPie(){
        var echartsPie = echarts.init(document.getElementById('echartsPie'));
        var option = {
                title : [{
                    text: '国家分布',
                    subtext: '独家报道',
                    x:'center'
                }],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} 个({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:datas,
                    
                },
                legend: {
                orient: 'vertical',
                x: 'left',
                data: json,
                icon:"circle",
            },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true, 
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'数量',
                        type:'pie',
                        radius : '55%',//饼图的半径大小
                        center: ['50%', '60%'],//饼图的位置
                        data:json,
                    },
                ]
            }; 
        echartsPie.setOption(option);
    }
</script>

</body>
</html>